<template>
  <div class="good-container">
    <div class="good-header">
      <h2>商品管理</h2><hr/>
      <button @click="addGood">添加商品</button><input class="uploadType" placeholder="待添加分类的名称" v-model="addType"/><button @click="uploadType">添加分类</button>
    </div>
    <div class="good-tabar">
        <label for="good-name">商品名称</label><input id="good-name" placeholder="请输入商品的名称" v-model="goodName"/>
        <label for="goodType">商品类别</label><input id="goodType" placeholder="请选择商品类别" v-model="goodType"/>
        <button @click="search">搜索商品</button>
        <button @click="reset">重置</button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">序号</th>
          <th scope="col">商品名称</th>
          <th scope="col">商品类别</th>
          <th scope="col">商品单价</th>
          <th scope="col">商品规格</th>
          <th scope="col">商品折扣</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in showGoods.slice(page*pageSize,page*pageSize+pageSize)" :key="item.goodId">
          <th scope="row">{{ page*pageSize+index+1 }}</th>
          <td>{{ item.goodName }}</td>
          <td>{{ typeById[item.goodType] }}</td>
          <td>￥{{ item.goodPrice.toFixed(2) }}</td>
          <td>{{item.goodSpec}}</td>
          <td>￥{{ item.goodDiscount.toFixed(2) }}</td>
          <td><button @click="jumpToEdit(item)">编辑</button><button @click="deleteGood(item.goodId)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <div class="good-footer">
      <h6>共{{ totalPage }}页</h6>
            <div class="svg-container" @click="delPage">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                </svg>
            </div>
            <div class="page-show">{{ page+1 }}</div>
            <div class="svg-container" @click="addPage">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                </svg>
            </div>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
    totalPage(){
      return Math.ceil(this.showGoods.length/this.pageSize)
    }
  },
  data(){
    return {
      typeById:{},
      typeByName:{},
      orginGoods:[],
      showGoods:[],
      page:0,
      pageSize:5,
      goodName:'',
      goodType:'',
      addType:''
    }
  },
  methods:{
    async jumpToEdit(item){
      this.$router.push({
        path:'/manager/editGood',
        query:item
      })
    },
    async deleteGood(goodId){
      if(confirm('您确定要删除吗?')){
        let {data:ret} = await this.$http.post('/deleteGoodById/'+goodId)
        if(ret.affectedRows>0){
          alert('删除成功')
          this.initData()
        }
        else
          return alert('删除失败')
      }
    },
    addGood(){
      this.$router.push('/manager/addGood')
    },
    addPage(){
      if(this.page+2>this.totalPage)
          return
      this.page++
    },
    delPage(){
        if(this.page-1<0)
            return
        this.page--
    },
    async initData(){
      let {data:res} = await this.$http.get('/getAllType')
      res.forEach(item=>{
        this.typeById[item.typeId] = item.typeName
        this.typeByName[item.typeName] = item.typeId
      })
      let {data:ret} = await this.$http.get('/getAllGoods')
      this.orginGoods = ret
      this.showGoods = ret.slice(0)
    },
    search(){
      if(this.goodName===''&&this.goodType==='')
        return
      else if(this.goodName!==''){
        this.showGoods = this.orginGoods.filter(item=>item.goodName===this.goodName)
        this.page = 0
      }else if(this.goodType!==''){
        this.showGoods = this.orginGoods.filter(item=>item.goodType==this.typeByName[this.goodType])
        this.page = 0
      }
    },
    reset(){
      this.showGoods = this.orginGoods.slice(0)
      this.page = 0
      this.goodName = ''
      this.goodType = ''
    },
    async uploadType(){
      let {data:ret} = await this.$http.post('/uploadType/'+this.addType)
      if(ret.affectedRows>0){
        this.addType = ''
        return alert('添加成功')
      }
      return alert('添加失败')
    }
  },
  created(){
    this.initData()
  }
}
</script>

<style lang="less" scoped>
  button{
        border: 0px solid #ffffff;
        border-radius: 10px;
        background-color: #4f56bf;
        color: #ffffff;
        box-sizing: border-box;
        padding: 8px;
        font-size: 14px;
        margin-right: 10px;
      }
  .good-container{
    width: 95%;
    height: 95%;
    background-color: #ffffff;
    position: relative;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: left;
    .uploadType{
      margin-right: 10px;
        border-radius: 10px;
        border: 0.5px solid #4f56bf;
        padding: 5px;
    }
    .good-footer{
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 30px;
      left: 0px;
      width: 100%;
      div{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          cursor: pointer;
      }
      .page-show{
          border: 1px solid #314fa0;
          width: 30px;
          border-radius: 5px;
      }
      h6{
          margin:0;
      }
    }
    .good-tabar{
      margin: 20px 0;
      label{
        margin-right: 10px;
      }
      input{
        margin-right: 10px;
        border-radius: 10px;
        border: 0.5px solid #4f56bf;
        padding: 5px;
      }
    }
    .good-header{
      h2{
        color: #4f56bf;
        font-weight: 900;
      }
      hr{
        border: 2px solid #4f56bf;
      }
      
    }
  }
</style>